<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <textarea cols="30" rows="10" @keyup="copyContent($event)"></textarea>

        <!-- 修饰符 -->
        <!-- 1、按键修饰符（键盘按键&鼠标按键）：描述键盘事件或者鼠标事件被哪些对应的按键触发
        .a、.b、.c……
        .enter .tab .delete(退格键&删除键) .esc .space .up .down .left .right
        ->下面的修饰符被 vue 认为是系统 修饰符
        .ctrl .alt .shift .meta(Mac 系统下的 command) -->
        <hr>
        <input type="text" @keyup.a="printCode($event)"/>
        <input type="text" @keyup.backspace="printCode($event)"/>
        <input type="text" @keyup.delete="printCode($event)"/>
        <input type="text" @keyup.46="printCode($event)"/>

        <!-- 修饰符可以连写，常规修饰符表示||关系 -->
        <input type="text" @keyup.a.b.c="printCode"/>
        <!-- 特殊修饰符，是&&的关系 -->
        <input type="text" @keyup.ctrl.c="printCode"/>
        <input type="text" @keyup.ctrl.c.a.b="printCode"/>
        <hr>

        <!-- 鼠标按键 -->
        <input type="button" value="鼠标事件" @mouseup.left="printMouse">
        <input type="button" value="鼠标+Ctrl" @mouseup.ctrl.middle="printMouse">
        <hr>
        <!-- 
            2.功能修饰符 
            .once .exact
            .stop 阻止事件冒泡行为 event.stopPropagation()
            .self 被该修饰符修饰的事件 只能在当前元素触发时执行
            .capture 事件捕获行为 （冒泡现象的反向结果）
            .prevent 阻止事件或标签的默认行为 event.preventDefault()
        -->
        <input type="button" value="一次性事件修饰符" @click.once="printFun">
        <input type="button" value="精准修饰符" @click.c="printFun"><!-- 绑定不了键盘的普通修饰符，只能绑定系统修饰符 -->
        <!-- 精准修饰符是指只能有ctrl -->
        <input type="button" value="精准修饰符" @click.ctrl.exact="printFun">
        <!-- 没有系统按键按下时，执行点击方法 -->
        <input type="button" value="精准修饰符" @click.exact="printFun">
        <hr>
        <div style="width: 400px;height: 400px; border: 1px solid black;" @click="printName('div1')">
                div1
                <div style="width: 300px;height: 300px; border: 1px solid black;"  @click="printName('div2')">
                    div2
                    <div style="width: 200px;height: 200px; border: 1px solid black;"  @click="printName('div3')">
                        div3
                        <div style="width: 100px;height: 100px; border: 1px solid black;"  @click="printName('div4')">div4</div>
                    </div>
                </div>
            </div>
            <hr>
            <div style="width: 400px;height: 400px; border: 1px solid black;" @click.capture="printName('div1')">
                    div1
                    <div style="width: 300px;height: 300px; border: 1px solid black;"  @click.capture="printName('div2')">
                        div2
                        <div style="width: 200px;height: 200px; border: 1px solid black;"  @click.capture.stop="printName('div3')">
                            div3
                            <div style="width: 100px;height: 100px; border: 1px solid black;"  @click="printName('div4')">div4</div>
                        </div>
                    </div>
                </div>

            <!-- 事件代理 -->
            <ul @click.capture.stop="printContent($event)">
                <li>li1</li>
                <li>li2</li>
            </ul>
            <hr>
            <!--冒泡是添加self仅自己不会触发事件-->
            <input type="button" value="self" @click.self="printFun">
            <button @contextmenu.prevent="printFunA">右键菜单</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            i:0
        },
        methods: {  
            copyContent(e){
                // console.log(e);
                if(e.ctrlKey&&e.key=="c"){
                    console.log(e.target.value);
                }
            },
            printCode(e){
                console.log(e.key,e.code,e.keyCode);
            },
            printMouse(){
                console.log(this.i);
                this.i++;
            },
            printFun(e){
                console.log("方法执行",e);
            },
            printName(name){
                console.log(name);
            },
            printContent(e){
                console.log(e.target);
            },
            printFunA(){
                console.log("右键菜单被调用");
            }
            
        },
    });
</script>
</html>